<!--
 * Copyright 2010, Google Inc.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Google Inc. nor the names of its
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>
        <title>Halo</title>
        <script src="../khronos/webgl-debug.js"></script>
        <script src="../tdl/base.js"></script>
        <script src="voronoi.js"></script>
        <script src="halo.js"></script>
        <style type="text/css">
            #c {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            body {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body id="viewContainer">
        <canvas id="c"></canvas>
        <script id="halo_vertex" type="x-glsl-shader/x-fragment">
            attribute mediump vec2 position;
            attribute mediump vec2 control_point;
            uniform mediump mat2 view_transform;
            varying mediump vec2 direction;
            void main() {
                direction = position - control_point;
                gl_Position = vec4(view_transform * position, 0., 1.);
            }
        </script>
        <script id="halo_fragment" type="x-glsl-shader/x-fragment">
            varying mediump vec2 direction;

            // scale and bias for radius
            uniform mediump float inv_width;
            uniform mediump float offset;

            // screen-space antialiasing factor
            uniform mediump float blur;

            // Texture containing stripe colors and its size.
            uniform lowp sampler2D tex;
            uniform mediump float inv_texture_size;

            void main() {
                // radius, i.e. distance from the control point
                mediump float r = inv_width * length(direction) + offset;

                // "Bilinear optimization."  We want the texture coordinates
                // to stick around the texel centers, sort of like in a toon
                // shader.
                mediump float fv = fract(r - .5);
                r += smoothstep(.5 - blur, .5 + blur, fv) - fv;
                //  clamp((fv - (.5 - blur)) / (2. * blur), 0., 1.);

                // Normalize texture coordinates.  This cannot be backed into
                // inv_width because the step must know where the texel
                // centers are.
                r *= inv_texture_size;

                gl_FragColor = texture2D(tex, vec2(r, .5));
            }
        </script>
        <script id="base_effect_vertex" type="x-glsl-shader/x-vertex">
            attribute mediump vec2 position;
            uniform mediump mat2 view_transform;

            varying mediump vec2 view_position;
            varying mediump vec2 screen_position;

            void main() {
                mediump vec2 view = view_transform * position;

                view_position = view;
                screen_position = position;
                gl_Position = vec4(position.xy, 0., 1.);
            }
        </script>
        <script id="circle_fragment" type="x-glsl-shader/x-fragment">
            varying mediump vec2 view_position;
            varying mediump vec2 screen_position;
            uniform lowp sampler2D tex0;
            uniform lowp sampler2D tex1;
            uniform mediump float alpha;
            uniform mediump float blur;
            uniform mediump float sign;
            void main() {
                mediump vec2 tex_position = .5 * screen_position + .5;
                lowp vec4 color0 = texture2D(tex0, tex_position);
                lowp vec4 color1 = texture2D(tex1, tex_position);
                mediump float v = sign * (length(view_position) + alpha);

                mediump float line_width = 3. * blur;
                mediump float mix1 = 1. - smoothstep(-line_width - blur,
                    -line_width, v);
                mediump float mix2 = smoothstep(line_width, line_width + blur, v);

                gl_FragColor = vec4(mix1 * color0.rgb + mix2 * color1.rgb, 1.);
            }
        </script>
        <script id="sweep_fragment" type="x-glsl-shader/x-fragment">
            varying mediump vec2 view_position;
            varying mediump vec2 screen_position;
            uniform lowp sampler2D tex0;
            uniform lowp sampler2D tex1;
            uniform mediump float blur;
            uniform mediump vec3 line;
            void main() {
                mediump vec2 tex_position = .5 * screen_position + .5;
                lowp vec4 color0 = texture2D(tex0, tex_position);
                lowp vec4 color1 = texture2D(tex1, tex_position);

                mediump float v = dot(line.xy, view_position) + line.z;

                mediump float line_width = 3. * blur;
                mediump float mix1 = 1. - smoothstep(-line_width - blur,
                    -line_width, v);
                mediump float mix2 = smoothstep(line_width, line_width + blur, v);

                gl_FragColor = vec4(mix1 * color0.rgb + mix2 * color1.rgb, 1.);
            }
        </script>
    </body>
</html>

